<template>
    <div class="relation-report">
        <cardList :columns="columns" :data="tableData.list" v-show="tableData.total"></cardList>
        <Page 
            v-show="tableData.total"
            :total="tableData.total" 
            :page-size="queryParams.pageSize" 
            :current="queryParams.pageIndex" 
            show-total 
            show-elevator 
            @on-change="changePageNow" />
        <no-data text="暂无信息" v-show="!tableData.total"></no-data>
        <Modal
            v-model="showModal"
            :title="currentItem.name || '-'">
            <div v-html="currentItem.remark"></div>
            <div slot="footer">
                <Button @click="showModal = false;">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getReportList } from '@/api/scientific/report'
import NoData from '@/components/common/no-data';
import cardList from '@/components/list-template/card-list/cardList.vue'

export default {
    name: 'RelationReport',
    components: { NoData, cardList },
    props: {
    },
    data() {
        return {
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                contentId: this.$route.query.id,
            },
            tableData: {
                list: [],
                total: 0
            },
            showModal: false,
            currentItem: {},
            columns: [
                {
                    title: '科研小结名称',
                    key: 'name',
                    align: 'center',
                    placement:'top-left',
                    width: 300,
                    tooltip: true
                },
                {
                    title: '类型',
                    key: 'type',
                    placement:'top-left',
                    align: 'center',
                    width: 40,
                    render: (h,params)=>{
                        return h('span', params.row.type === 1 ? '文件' : '富文本')
                    }
                },
                {
                    key: 'action',
                    align: 'center',
                    placement:'top-right',
                    render:(h,params)=>{
                        return h('div',[
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    attrs: {
                                        title: '预览'
                                    },
                                    style: {
                                        border: 'none',
                                        background: 'none',
                                        boxShadow: 'none',
                                        color: '#3D52C9'
                                    },
                                    on: {
                                        click: () => {
                                            this.preview(params.row);
                                        }
                                    }
                                },
                                [
                                    h('Icon', {
                                        props: {
                                            type: 'md-search',
                                            size: 26
                                        }
                                    })
                                ]
                            )
                        ])
                    }
                }
            ]
        }
    },
    filters: {
    },
    watch: {
    },
    mounted() {
    },
    methods: {
        // 查询指定页数据
        changePageNow(val){
            this.queryParams.pageIndex = val;
            this.getTableList();
        },
        // 查询列表
        getTableList() {
            getReportList(this.queryParams).then(({ code, message, data = {} }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.tableData.list = data.items || []
                this.tableData.total = data.total
            }).catch(() => {
                this.$Message.error('获取科研小结异常')
            })
        },
        preview(item) {
            if (item.type === 1) { // 文件预览
                window.openTrain(`/api/minio/filePreview?path=${item.path}`)
            } else { // 富文本预览
                this.currentItem = item
                this.showModal = true
            }
        }
    }
};
</script>

<style scoped>
.relation-report {
    height: 100%;
}
.relation-report /deep/ .ivu-page {
    text-align: center;
    margin-top: 20px;
}
</style>